<template>
  <section class="edit">
    <div>有什么有趣的事情分享给大家</div>
    <textarea name="" id="" rows="10" v-model="content" style="width: 100%"></textarea>
    <el-button size="small" style="float: right" @click="post" :loading="button_loading">发布</el-button>
    <el-upload
      class="upload-demo"
      action="http://localhost:8000/post/img/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="Images"
      :before-upload="beforeAvatarUpload"
      list-type="picture">
      <el-button size="small" type="primary">添加图片</el-button>
    </el-upload>
    <!--{{value2}}-->
    所属
    <el-switch
      v-model="value2"
      @change="getOption"
      on-color="#13ce66"
      off-color="#ff4949"
      on-text="群组"
      off-text="个人">
    </el-switch>
    <el-select v-model="value" placeholder="请选择" :disabled="optionsEnable">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </section>
</template>
<script>
  /* eslint-disable spaced-comment */

  import { addPost, RemoveImage, getImageUrl, groupRead } from '@/public/api'
  import { Upload } from '../../public/util'

  export default {
    data () {
      return {
        value: '',
        options: [],
        optionsEnable: true,
        value2: false,
        content: '',
        button_loading: false,
        Images: [],
        realImage: [],
        upLoadData: {
          user_id: this.User_id
        }
      }
    },
    methods: {
      getOption (value) {
        if (value) {
          groupRead().then(
            data => {
              this.options = (data.data).map(x => {
                return {
                  value: x.group_id,
                  label: x.group_info.name
                }
              })
              this.optionsEnable = false
            }
          ).catch(data => {})
        } else {
          this.value = ''
          this.optionsEnable = true
        }
      },
      post () {
        this.button_loading = true
        var para = {
          content: this.content,
//          user_id: this.User_id,
          Images: this.realImage.map(x => { return {url: x.origin} })
        }
        if (!this.optionsEnable && this.value !== '') {
          para.group_id = this.value
        }
        addPost(para).then(
          data => {
            this.button_loading = false
            this.$message.success(`发送成功`)
            this.realImage = []
            this.content = ''
            this.Images = []
            this.$emit('success')
          }
        ).catch(
          message => {
            this.button_loading = false
            this.$message.success(`失败`)
          }
        )
      },
      addImg () {
        this.Images.push({})
      },
      handlePreview (file) {
        console.log(1111111, file)
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
        if (!file) return
        RemoveImage({
          url: file.url
        }).then(
          data => {
//            if (data.status) {
            console.log('服务器端删除成功')
            this.realImage = this.realImage.filter(x => x.url !== file.url)
//            this.realImage = fileList.map(x => x.url)
            fileList = this.realImage
            this.Images = this.realImage
//            }
          }
        ).catch(
          message => {
            console.log(message)
            this.$message.error('请重试')
          }
        )
      },
      /*handleAvatarSuccess2 (res, file) {
        console.log(res, file)
        this.realImage.push({
          'url': file.response.photo
        })
      },*/
      beforeAvatarUpload (file) {
        var _this = this
        Upload(file, 'post', function (x) {
          _this.realImage.push({
            'url': getImageUrl(x),
            'origin': x
          })
          _this.Images = _this.realImage
        })
        return false
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>
<style scoped>
  .edit {
    padding: 20px;
  }

  textarea {
    width: 100%;
    min-height: 2em;
    max-height: 8em;
    outline: none;
  }

  textarea:focus {
    border: 1px solid #fa7d3c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.36) inset;
  }
</style>
